<template>
  <div class="preview-view">
    <div
      class="screen-content"
      :style="`width:${screenWidth}px;height:${screenHeight}px;
        transform:translate(${getMinValue(defaultLeft)}px, ${getMinValue(
        defaultTop
      )}px) scale(${scaleSize / 100});transform-origin:0 0;`"
    >
      <img :src="require(`@/assets/map${curMapId}.png`)" alt="" />
      <div class="screen-decoration">
        <!-- 装饰图层 -->
        <!-- <img src="@/assets/map2.png" alt="" /> -->
        <img
          v-for="(imgItem, index) in decorationImgList"
          :key="index"
          class="position-img"
          :class="imgItem.position"
          :src="require(`@/designer/assets/images/${column}/${imgItem.bg}.png`)"
        />
        <div class="position-title">{{ screenTitle }}</div>
        <div class="grid-stack" :class="`grid-stack-style${column}`">
          <div
            class="grid-stack-item"
            v-for="item in nodesArr"
            :gs-id="item.id"
            :id="item.id"
            :key="item.id"
            :gs-w="item.w"
            :gs-h="item.h"
            :gs-x="item.x"
            :gs-y="item.y"
          >
            <div class="grid-stack-item-content">
              <component
                :is="item.componentName"
                v-bind="item.props"
                :node="item"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import View1 from '@/designer/assets/components/view1/index.vue';
import View2 from '@/designer/assets/components/view2/index.vue';
import Condition from '@/designer/assets/components/condition/index.vue';
import MapDocument from '@/designer/assets/components/map-document/index.vue';
export default {
  name: 'PreviewRender',
  components: {
    View1,
    View2,
    Condition,
    MapDocument,
  },
};
</script>

<script setup>
import 'gridstack/dist/gridstack.min.css';
import '@/styles/gridstack-column.scss';
import { GridStack } from 'gridstack';
import { SCREEN_SIZE } from '@/designer/constants/index';

const props = defineProps({
  nodes: {
    type: Array,
    default: () => [],
  },
  map: {
    type: Object,
    default: () => ({}),
  },
  screen: {
    type: Object,
    default: () => ({}),
  },
});

const curMapId = computed(() => {
  return props.map.props.mapId;
});

const column = computed(() => {
  return props.map.props.column;
});

const screenTitle = computed(() => {
  return props.screen.props.title;
});

const decorationImgList = [
  {
    bg: 'top-bg',
    position: 'position-top',
  },
  {
    bg: 'right-bg',
    position: 'position-left',
  },
  {
    bg: 'right-bg',
    position: 'position-right',
  },
  {
    bg: 'bottom-bg',
    position: 'position-bottom',
  },
];

const screenWidth = ref(SCREEN_SIZE[column.value].width);
const screenHeight = ref(SCREEN_SIZE[column.value].height);
const scaleWidth = ref((window.innerWidth / screenWidth.value) * 100); // 默认缩小
const scaleHeight = ref((window.innerHeight / screenHeight.value) * 100); // 默认缩小

const scaleSize = computed(() => {
  return scaleWidth.value < scaleHeight.value
    ? scaleWidth.value
    : scaleHeight.value;
});

const defaultTop = ref(
  (window.innerHeight -
    (window.innerWidth / screenWidth.value) * screenHeight.value) /
    2
); // 垂直居中

const defaultLeft = ref(
  (window.innerWidth -
    (window.innerHeight / screenHeight.value) * screenWidth.value) /
    2
); // 水平居中

const getMinValue = (value) => {
  return value < 0 ? 0 : value;
};

const grid = ref(null);
const nodesArr = ref([]);
onMounted(async () => {
  grid.value = GridStack.init({
    acceptWidgets: true,
    marginTop: 0,
    marginBottom: 16,
    marginLeft: 16,
    marginRight: 0,
    disableResize: true,
    float: true,
    row: 10,
    cellHeight: '108px',
  });

  nodesArr.value = props.nodes;
  await nextTick();

  grid.value.column(column.value);
  grid.value.disable(false); // 禁止拖动
  nodesArr.value.forEach((item) => {
    grid.value.makeWidget(`#${item.id}`);
  });

  GridStack.setupDragIn('.sidebar .grid-stack-item', {
    appendTo: 'body',
    helper: 'clone',
  });
});
</script>

<style lang="scss" scoped>
// 画布
.preview-view {
  height: 100%;
  .scale-btn {
    width: 140px;
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 999;
  }
  .screen-content {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
    img {
      height: 100%;
      display: block;
    }
    .screen-decoration {
      position: absolute;
      inset: 0;
      .position-img {
        display: block;
        height: auto;
      }
      .position-top {
        position: absolute;
        top: 0;
      }
      .position-left {
        position: absolute;
        left: 8px;
        top: 76px;
        rotate: 180deg;
      }
      .position-right {
        position: absolute;
        right: 8px;
        top: 76px;
      }
      .position-bottom {
        width: calc(100% - 16px);
        height: 16px;
        position: absolute;
        bottom: 0;
        left: 8px;
      }
      .position-title {
        position: absolute;
        top: 16px;
        z-index: 2;
        text-align: center;
        width: 100%;
        font-weight: 0;
        font-size: 40px;
        color: #ffffff;
        letter-spacing: 13.33px;
        text-shadow: 0 0 20px #6191ff26;
      }
      .grid-stack {
        position: absolute;
        inset: 0;
        height: 100%;
        // width: calc(100% - 64px);
        width: calc(100% - 32px);
        // margin-left: 24px;
        margin-left: 8px;
      }
      .grid-stack-style16 {
        width: calc(100% - 32px);
        margin-left: 8px;
      }
      .grid-stack-style21 {
        width: calc(100% - 42px);
        margin-left: 13px;
      }
      .grid-stack-style32 {
        width: calc(100% - 64px);
        margin-left: 24px;
      }
    }
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.grid-stack-item-content {
  animation: fadeIn 1s ease-in-out forwards;
}
</style>

